<template>
  <div class="land">
    <popup
      class="popup"
      v-show="showPopup"
      :cqgh="cqgh"
      :kgsj="kgsj"
      :kjzl="kjzl"
      :style="{
        bottom: popupPositon.bottom,
        left: popupPositon.left
      }"
      @close="closePopup"
      @detail="showDetail"
    >
    </popup>
    <MapView
      :key="defaultViewId"
      :viewerId="defaultViewId"
      @onload="onMapLoad"
      v-if="defaultViewId"
      @beforeDestroy="beforeMapDestroy"
    ></MapView>
    <switchProp></switchProp>

    <Utool :viewerId="defaultViewId"></Utool>
    <!-- 左侧列表 -->
    <div>
      <el-input
        placeholder="请输入土地编号"
        v-model="searchParams.id"
        class="keyword"
      >
      </el-input>
      <div
        class="keyword-search"
        @click="handleClickSearch"
      >
        <i class="el-icon-search"></i>
      </div>
      <div class="list">
        <div class="list-top">
          <div
            class="list-top-item"
            v-for="(item, index) of meunConfig"
            :key="index"
            @click="showSearch(item.title)"
          >
            <img :src="item.img" />
            <div
              class="list-top-item-title"
              :class="{ active: item.active }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="list-reset">
          <div
            class="list-reset-button"
            @click="resetAllSearch"
          >
            <svg-icon
              icon-class="reset"
              font-size="14"
            ></svg-icon
            >重置
          </div>
        </div>
        <!-- <div class="list-title">
          <div class="list-title-name">土地列表</div>
          <div class="list-title-total">
            共{{ total }}条
          </div>
        </div> -->
        <div class="list-content">
          <div
            class="list-content-item"
            :class="{
              active: hightLightLand === item['SmID']
            }"
            v-for="(item, index) of landList"
            :key="index"
            @click="handleLandClick(item)"
          >
            <div class="list-content-item-top">
              <span>{{ item['SmID'] }}</span>
              <span
                ><span class="list-content-item-top-num">{{
                  item['地块面积（平方米）']
                }}</span
                >平方米</span
              >
            </div>
            <div class="list-content-item-bottom">
              用地性质：{{ item['LandUseNature'] }}
            </div>
          </div>
        </div>
        <div class="list-pagination" v-if="total">
          <el-pagination
            layout="prev, pager, next"
            :page-size="parameter.pageSize"
            @current-change="pageChange"
            :total="total"
            :pager-count="5"
            :current-page="parameter.currentPage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 左侧列表搜索 -->
    <div class="search" v-show="searchVisiable">
      <div class="search-header">
        <span>筛选</span>
        <i class="el-icon-close" @click="hideSearch"></i>
      </div>
      <div class="search-title">
        按{{ currentSearchTitle }}
      </div>
      <div class="search-content">
        <div
          class="search-content-block"
          v-if="currentSearchTitle === '用地性质'"
        >
          <div
            class="search-content-block-item"
            :class="{
              active: xzChooseList.indexOf(item) !== -1
            }"
            v-for="(item, index) of xzList"
            :key="index"
            @click="handleClickBlock(item)"
          >
            {{ item }}
          </div>
          <div class="search-content-block-item1"></div>
        </div>
        <div
          class="search-content-inputs"
          v-if="currentSearchTitle === '用地面积'"
        >
          <el-input-number
            v-model="searchParams.areaMin"
            :step="1"
          ></el-input-number>
          <div class="search-content-inputs-middle">-</div>
          <el-input-number
            v-model="searchParams.areaMax"
            :step="1"
          >
          </el-input-number>
          <div class="search-content-inputs-unit">
            平方米
          </div>
        </div>
        <div
          class="search-content-inputs"
          v-if="currentSearchTitle === '容积率'"
        >
          <el-input-number
            v-model="searchParams.rateMin"
            :step="1"
          ></el-input-number>
          <div class="search-content-inputs-middle">-</div>
          <el-input-number
            v-model="searchParams.rateMax"
            :step="1"
          >
          </el-input-number>
        </div>
        <div
          class="search-content-inputs"
          v-if="currentSearchTitle === '建筑密度'"
        >
          <el-input-number
            v-model="searchParams.densityMin"
            :step="1"
          ></el-input-number>
          <div class="search-content-inputs-middle">-</div>
          <el-input-number
            v-model="searchParams.densityMax"
            :step="1"
          >
          </el-input-number>
        </div>
        <div
          class="search-content-inputs"
          v-if="currentSearchTitle === '建筑限高'"
        >
          <el-input-number
            v-model="searchParams.heightMin"
            :step="1"
          ></el-input-number>
          <div class="search-content-inputs-middle">-</div>
          <el-input-number
            v-model="searchParams.heightMax"
            :step="1"
          >
          </el-input-number>
        </div>
      </div>
      <div class="search-button">
        <el-button
          @click="resetSearch"
          class="cancle-btn"
          :loading="btnLoading"
          >重置</el-button
        >
        <el-button
          @click="handleClickSearch"
          class="save-btn"
          :loading="btnLoading"
          >确定</el-button
        >
      </div>
    </div>
    <!-- 查看详情 -->
    <div class="detail" v-if="detailVisible">
      <i class="el-icon-error" @click="hideDetail"></i>
      <cqDetail
        v-if="detailType === 'cq'"
        title="查看详情"
        :isEdit="true"
        :isDetail="true"
        :pkid="detailPkid"
        :showBack="false"
      ></cqDetail>
      <bzDetail
        v-if="detailType === 'bz'"
        :defaultIndex="0"
        type="detail"
        title="查看详情"
        :pkid="detailPkid"
        :showBack="false"
      ></bzDetail>
    </div>
    <!-- 底部多选 -->
    <div class="bottom">
      <div
        class="bottom-item"
        v-for="(item, index) of bottomCofig"
        :key="index"
      >
        <el-checkbox
          v-model="bottomChecked[item.name]"
          @change="(val) => changeBottomLayer(val, item)"
        ></el-checkbox>
        <span class="bottom-item-name">{{
          item.title
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch
} from 'vue'
import MapView from '@/components/mapView'
import Utool from '@/components/utool/index-land'
import { getAction } from '@/utils/helper'
import { globalBaseMap } from '@/utils/basemap'
import { homePosition } from '@/utils/constant'
import cacheUtil from '@/utils/cache'
import { getKJGeojson } from '@/api/landInfo.js'
import popup from './popup.vue'
import tree from '@/store/module/tree'
import location from '@/assets/img/location4.png'
import * as turf from '@turf/turf'
import axios from 'axios'
import cqDetail from '@/views/wisdomLand/ManagementDataManagement/add.vue'
import bzDetail from '@/views/wisdomLand/SiteReportManagement/components/formPage.vue'
import switchProp from '@/components/mapView/switchProp.vue'

const mapViewer = {}
let _layerManager = null
const defaultViewId = ref('defaultViewId')
const cameraConfig = ref(null)
const activeTab = reactive({
  kgsj: true,
  cqgh: false,
  bzsj: false
})
let mvt = null
// 加载控规数据
const loadKJData = async () => {
  const viewer = mapViewer[defaultViewId.value]
  const layerManager = _layerManager
  const url =
    'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B0202_%E6%8E%A7%E8%A7%84%E7%94%A8%E5%9C%B0'
  mvt = viewer.scene.addVectorTilesMap({
    url: url,
    name: 'kgsj',
    viewer: viewer
  })
  const layer = {
    // id: passParams.id,
    // title: passParams.title,
    // name: passParams.name,
    type: 'mvt',
    layer: mvt,
    title: '控规数据',
    name: 'kgsj',
    id: 'kgsj',
    // layer: null,
    // from: passParams.from,
    serviceUrl: url

    // signService: passParams.signService,
    // dataService: passParams.dataService,
    // serviceType: passParams.serviceType,
    // currentDataIndex: passParams.currentDataIndex,
    // dataList: passParams.dataList
  }
  const legendData = getLegendLayer(url)
  console.log(legendData)
  // layerManager.set(layer)
  layerManager.fire('add', layer)
}
// 加载控规高亮数据
let highlightMvt = null
const loadHighLightData = () => {
  const viewer = mapViewer[defaultViewId.value]
  const layerManager = _layerManager
  highlightMvt = viewer.scene.addVectorTilesMap({
    url: 'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B0202_%E6%8E%A7%E8%A7%84%E7%94%A8%E5%9C%B0',
    name: 'kgsj-highlight',
    viewer: viewer
  })
  // highlightMvt.show = false;
  window.highlightMvt = highlightMvt

  setTimeout(() => {
    highlightMvt.setPaintProperty(
      '控规20230317更新_2000@规划更新#1_unique_(0_24)',
      'fill-pattern',
      null
    )
    highlightMvt.setPaintProperty(
      '控规20230317更新_2000@规划更新#1_unique_(0_24)',
      'fill-color',
      '#fff'
    )
  }, 1000)
  console.log(highlightMvt)
}
const zhtdKjDataJson = ref(null)
const landDataJson = ref(null)
const fetchKJGeojson = async () => {
  const res = await getKJGeojson()
  const data = res.data || {}
  const landDataManageList = data.landDataManageList || []
  const zhtdKjDataList = data.zhtdKjDataList || []
  let landFeatures = []
  landDataManageList.map((item) => {
    landFeatures = [
      ...landFeatures,
      ...JSON.parse(item).features
    ]
  })
  if (landFeatures.length > 0) {
    landDataJson.value = {
      type: 'FeatureCollection',
      features: landFeatures
    }
  }

  let zhtdKjFeatures = []
  zhtdKjDataList.map((item) => {
    zhtdKjFeatures = [
      ...zhtdKjFeatures,
      ...JSON.parse(item).features
    ]
  })
  if (zhtdKjFeatures.length > 0) {
    zhtdKjDataJson.value = {
      type: 'FeatureCollection',
      features: zhtdKjFeatures
    }
  }
}
const loadZhtdKjDataJson = () => {
  const viewer = mapViewer[defaultViewId.value]
  const layerManager = _layerManager
  if (zhtdKjDataJson.value) {
    const geojson = Cesium.GeoJsonDataSource.load(
      zhtdKjDataJson.value,
      {
        clampToGround: true
      }
    )
    Cesium.when(geojson, (dataSource) => {
      if (dataSource) {
        viewer.dataSources.add(dataSource)
        viewer.flyTo(dataSource)
        const layer = {
          id: 'bzsj',
          title: '报征数据',
          type: 'geojson',
          layer: dataSource
        }
        layerManager.set(layer)
        layerManager.fire('add', layer)
      }
    })
  }
}
const loadLandDataJson = () => {
  const viewer = mapViewer[defaultViewId.value]
  const layerManager = _layerManager
  if (landDataJson.value) {
    const geojson = Cesium.GeoJsonDataSource.load(
      landDataJson.value,
      {
        clampToGround: true
      }
    )
    Cesium.when(geojson, (dataSource) => {
      if (dataSource) {
        viewer.dataSources.add(dataSource)
        viewer.flyTo(dataSource)
        const layer = {
          id: 'cqgh',
          title: '拆迁管护',
          type: 'geojson',
          layer: dataSource
        }
        layerManager.set(layer)
        layerManager.fire('add', layer)
      }
    })
  }
}
// 气泡位置
const popupPositon = ref({
  bottom: 0,
  left: 0
})
// 是否展示气泡
const showPopup = ref(false)
// 关闭气泡
const closePopup = () => {
  showPopup.value = false
}
const kjzl = ref(null)
const cqgh = ref(null)
const kgsj = ref(null)
// 点击事件
const handleClick = () => {
  const viewer = mapViewer[defaultViewId.value]
  const scene = viewer.scene
  const clickHandler = new Cesium.ScreenSpaceEventHandler(
    viewer.scene.canvas
  )
  const handleLeftClick = (e) => {
    kjzl.value = null
    cqgh.value = null
    kgsj.value = null
    const lastClickedPosition = [e.position.x, e.position.y]
    const position = viewer.scene.pickPosition(e.position)
    var canvasHeight = scene.canvas.height

    var windowPosition = new Cesium.Cartesian2()
    Cesium.SceneTransforms.wgs84ToWindowCoordinates(
      scene,
      position,
      windowPosition
    )
    popupPositon.value.bottom =
      canvasHeight - windowPosition.y + 20 + 'px'
    popupPositon.value.left = windowPosition.x - 150 + 'px'
    let res
    try {
      if (mvt && mvt.name == 'kgsj') {
        res = mvt.queryRenderedFeatures([position])
      }
    } catch (error) {
      mvt.refresh()
      setTimeout(() => {
        handleLeftClick(e)
      }, 100)
      console.log(mvt)
      return
    }

    if (res && res.length > 0) {
      kgsj.value = res[0].feature.properties
    }
    const pick = viewer.scene.drillPick(e.position)
    pick.map((item) => {
      const prop = item.id.properties
      console.log(prop)

      const type = prop['类型']
        ? prop['类型'].getValue()
        : ''
      console.log(type)
      if (type === 'dataManage') {
        // 如果是拆迁管护数据
        cqgh.value = {
          xmmc: prop['项目名称'].getValue(),
          jd: prop['街道'].getValue(),
          cqmj: prop['面积'].getValue(),
          id: prop['主键id'].getValue()
        }
      } else if (type === 'kjData') {
        // 如果是堪界资料
        kjzl.value = {
          qsx: prop['区（市）县'].getValue(),
          pcmc: prop['批次名称'].getValue(),
          xmmc: prop['项目名称'].getValue(),
          xmdz: prop['项目地址'].getValue(),
          status: prop['状态'].getValue(),
          id: prop['主键id'].getValue()
        }
      }
    })
  }
  clickHandler.setInputAction(async (e) => {
    showPopup.value = true
    handleLeftClick(e)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
const onMapLoad = async function ({ id, viewer }) {
  const { toolManager, layerManager } = await getAction(id)
  mapViewer[id] = viewer
  _layerManager = layerManager
  globalBaseMap[id] =
    globalBaseMap[id] || toolManager.basemapManager
  handleLayerChange(layerManager)
  setViewer(viewer)
  handleSearch()
  handleClick()
  await fetchKJGeojson()
  loadKJData()
  // loadHighLightData()
  // loadZhtdKjDataJson()
  // loadLandDataJson()
  const baseMapList = await globalBaseMap[
    defaultViewId.value
  ].getBasemapList()
  if (baseMapList.length >= 1) {
    globalBaseMap[defaultViewId.value].switchBasemap(1)
  }
}
const cameraMovedByNavigation = ref(false)
// 设置视角
const setViewer = (viewer) => {
  const cacheItem = cacheUtil.getItem('camera')
  if (cacheItem) {
    try {
      const config = JSON.parse(cacheItem)
      if (config.cameraHeight && config.centerPoint) {
        cameraConfig.value = config
      } else {
        cameraConfig.value = null
      }
    } catch (e) {
      console.error(e)
      cameraConfig.value = null
    }
  } else {
    cameraConfig.value = null
  }
  viewer.camera.flyTo({
    destination: cameraConfig.value
      ? Cesium.Cartesian3.fromDegrees(
          Number(
            cameraConfig.value.centerPoint.split(',')[0]
          ),
          Number(
            cameraConfig.value.centerPoint.split(',')[1]
          ),
          Number(cameraConfig.value.cameraHeight)
        )
      : homePosition.destination,
    orientation: homePosition.orientation
  })
  viewer.scene.screenSpaceCameraController.enableCollisionDetection = true
  viewer.scene.globe.globeAlpha = 1
}
// 监听图层添加删除
const layerList = reactive([])
watch(
  () => layerList.value,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
  }
)
const handleLayerChange = (layerManager) => {
  // 监听添加删除
  layerManager.on('add', (e) => {
    if (e.id === 'kgsj') {
    }
    // activeTab[e.id] = true
  })
  layerManager.on('del', (e) => {
    bottomChecked.value[e] = false
  })
}
const beforeMapDestroy = (id) => {
  globalBaseMap[id] = null
  mapViewer[id] = null
}
onUnmounted(() => {
  globalBaseMap['defaultViewId'] = null
  mapViewer['defaultViewId'] = null
})
onMounted(() => {})
const landList = ref([])
const total = ref(0)
const parameter = ref({
  currentPage: 1,
  pageSize: 10,
  fromIndex: 0,
  toIndex: 9
})
const pageChange = (val) => {
  parameter.value.currentPage = val
  handleSearch()
}

// 搜索
const meunConfig = ref([
  {
    title: '用地性质',
    img: require('@/assets/img/td-ydxz.png'),
    active: false
  },
  {
    title: '容积率',
    img: require('@/assets/img/td-rjl.png'),
    active: false
  },
  {
    title: '建筑密度',
    img: require('@/assets/img/td-jzmd.png'),
    active: false
  },
  {
    title: '用地面积',
    img: require('@/assets/img/td-ydmj.png'),
    active: false
  },
  {
    title: '建筑限高',
    img: require('@/assets/img/td-jzxg.png'),
    active: false
  }
])
const currentSearchTitle = ref('')
const searchVisiable = ref(false)
// 打开搜索
const showSearch = (title) => {
  searchVisiable.value = true
  currentSearchTitle.value = title
}
// 关闭搜索
const hideSearch = () => {
  searchVisiable.value = false
  currentSearchTitle.value = ''
}
// 重置小模块搜索
const resetSearch = () => {
  parameter.value.currentPage = 1
  if (currentSearchTitle.value === '用地性质') {
    xzChooseList.value = []
  } else if (currentSearchTitle.value === '用地面积') {
    searchParams.value.areaMin = undefined
    searchParams.value.areaMax = undefined
  } else if (currentSearchTitle.value === '容积率') {
    searchParams.value.rateMin = undefined
    searchParams.value.rateMax = undefined
  } else if (currentSearchTitle.value === '建筑限高') {
    searchParams.value.heightMin = undefined
    searchParams.value.heightMax = undefined
  } else if (currentSearchTitle.value === '建筑密度') {
    searchParams.value.densityMin = undefined
    searchParams.value.densityMax = undefined
  }
  handleSearch()
}
// 重置所有搜索
const resetAllSearch = () => {
  parameter.value.currentPage = 1
  xzChooseList.value = []
  searchParams.value.areaMin = undefined
  searchParams.value.areaMax = undefined
  searchParams.value.rateMin = undefined
  searchParams.value.rateMax = undefined
  searchParams.value.densityMin = undefined
  searchParams.value.densityMax = undefined
  searchParams.value.heightMin = undefined
  searchParams.value.heightMax = undefined
  handleSearch()
}
const searchParams = ref({
  areaMin: undefined,
  areaMax: undefined,
  rateMin: undefined,
  rateMax: undefined,
  densityMin: undefined,
  densityMax: undefined,
  heightMin: undefined,
  heightMax: undefined
})
// 监听搜索条件
watch(
  () => searchParams.value,
  (newVal, oldVal) => {
    if (
      searchParams.value.areaMin !== undefined ||
      searchParams.value.areaMax !== undefined
    ) {
      meunConfig.value[3].active = true
    } else {
      meunConfig.value[3].active = false
    }
    if (
      searchParams.value.rateMin !== undefined ||
      searchParams.value.rateMax !== undefined
    ) {
      meunConfig.value[1].active = true
    } else {
      meunConfig.value[1].active = false
    }
    if (
      searchParams.value.densityMin !== undefined ||
      searchParams.value.densityMax !== undefined
    ) {
      meunConfig.value[2].active = true
    } else {
      meunConfig.value[2].active = false
    }
    if (
      searchParams.value.heightMin !== undefined ||
      searchParams.value.heightMax !== undefined
    ) {
      meunConfig.value[4].active = true
    } else {
      meunConfig.value[4].active = false
    }
  },
  {
    immediate: true,
    deep: true
  }
)
const url =
  // 'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-GuiHuaGengXin/rest/data'
  'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data'
const handleClickSearch = () => {
  parameter.value.currentPage = 1
  handleSearch()
}
const handleSearch = () => {
  parameter.value.fromIndex =
    0 + (parameter.value.currentPage - 1) * 10
  parameter.value.toIndex =
    9 + (parameter.value.currentPage - 1) * 10
  let filterStr = ''
  if (searchParams.value.id) {
    filterStr = `SmID like '%${searchParams.value.id}%'`
  } else {
    // 用地范围
    if (searchParams.value.areaMin) {
      filterStr += `地块面积（平方米） >= ${Number(
        searchParams.value.areaMin
      )}`
    }
    if (searchParams.value.areaMax) {
      if (filterStr !== '') {
        filterStr += ' and '
      }
      filterStr += `地块面积（平方米） <= ${Number(
        searchParams.value.areaMax
      )}`
    }

    // 用地性质
    let xzStr = ''
    const xzArr = []
    xzChooseList.value.forEach((item) => {
      xzArr.push(item)
      if (xzStr === '') {
        xzStr += `LandUseNature="${item}"`
      } else {
        xzStr += ` or LandUseNature="${item}"`
      }
    })
    // filter.push(["in", ["get", "用地性质"], xzArr]);
    if (xzStr) {
      if (filterStr !== '') {
        filterStr += ' and '
      }
      filterStr += xzStr
    }

    // 容积率
    if (searchParams.value.rateMin) {
      filterStr += `VolumnRate >= ${Number(
        searchParams.value.rateMin
      )}`
    }
    if (searchParams.value.rateMax) {
      if (filterStr !== '') {
        filterStr += ' and '
      }
      filterStr += `VolumnRate <= ${Number(
        searchParams.value.rateMax
      )}`
    }

    // 建筑密度
    if (searchParams.value.densityMin) {
      filterStr += `CompScale >= ${Number(
        searchParams.value.densityMin
      )}`
    }
    if (searchParams.value.densityMax) {
      if (filterStr !== '') {
        filterStr += ' and '
      }
      filterStr += `CompScale <= ${Number(
        searchParams.value.densityMax
      )}`
    }

    // 建筑限高
    if (searchParams.value.heightMin) {
      filterStr += `BuildHeiLimt >= ${Number(
        searchParams.value.heightMin
      )}`
    }
    if (searchParams.value.heightMax) {
      if (filterStr !== '') {
        filterStr += ' and '
      }
      filterStr += `BuildHeiLimt <= ${Number(
        searchParams.value.heightMax
      )}`
    }
  }
  const queryParameters =
    new SuperMap.GetFeaturesBySQLParameters({
      datasetNames: ['B_规划数据库:B0202_控规用地'],
      queryParameter: {
        name: 'B0202_控规用地',
        attributeFilter: filterStr,
        fields: [
          'SmID',
          'SmUserID',
          'SmArea',
          'SmPerimeter',
          'SmGeometry',
          '用地大类',
          'LandUseCode',
          'LandUseNature',
          'VolumnRate',
          'BuildHeiLimt',
          'CompNature',
          'CompScale',
          'Remark',
          '地块面积（平方米）'
        ]
      },
      fromIndex: parameter.value.fromIndex,
      toIndex: parameter.value.toIndex,
      maxFeatures: 99999,
      hasGeometry: true
    })
  const hightLightIds = []
  deleteAllMaker()
  L.supermap
    .featureService(url)
    .getFeaturesBySQL(queryParameters, (res) => {
      const list = []
      res.result.features.features.forEach((item) => {
        hightLightIds.push(item.id)
        const center = turf.center(item.geometry)
        addMaker(
          item.properties.SmID,
          center.geometry.coordinates[0],
          center.geometry.coordinates[1],
          0
        )
        if (!activeTab['kgsj']) {
          hideAllMaker()
        }
        list.push(item.properties)
      })
      if (highlightMvt) {
        highlightMvt.show = true
        highlightMvt.setFilter(
          '控规20230317更新_2000@规划更新#1_unique_(0_24)',
          ['in', '$id', ...hightLightIds]
        )
      }
      landList.value = list
      total.value = res.result.totalCount
      // searchVisiable.value = false
    })
}
const btnLoading = ref(false)
const xzList = ref([
  '服务设施用地',
  '高等院校用地',
  '工业用地',
  '公共交通场站用地',
  '公用设施用地',
  '公园绿道',
  '供电用地',
  '供燃气用地',
  '轨道交通线路用地',
  '环卫用地',
  '加油加气站用地',
  '教育科研用地',
  '居住商业混合用地',
  '科研用地',
  '农林用地',
  '排水用地',
  '其他公用设施用地',
  '商业服务业设施用地',
  '水域',
  '文化设施用地',
  '文物古迹用地',
  '消防用地',
  '一类工业用地',
  '医疗卫生用地',
  '中小学用地',
  '住宅用地'
])
const xzChooseList = ref([])
watch(
  () => xzChooseList.value,
  (newVal, oldVal) => {
    if (xzChooseList.value.length === 0) {
      meunConfig.value[0].active = false
    } else {
      meunConfig.value[0].active = true
    }
  },
  {
    immediate: true,
    deep: true
  }
)
const handleClickBlock = (value) => {
  if (xzChooseList.value.indexOf(value) === -1) {
    xzChooseList.value = [...xzChooseList.value, value]
  } else {
    const arr = xzChooseList.value.filter(
      (item) => item !== value
    )
    xzChooseList.value = [...arr]
  }
}
let makers = []
// 添加土地高亮maker
const addMaker = (id, lon, lat, height) => {
  const viewer = mapViewer[defaultViewId.value]
  const makerEntity = viewer.entities.add({
    id: id,
    position: Cesium.Cartesian3.fromDegrees(
      lon,
      lat,
      height
    ),
    billboard: {
      image: location,
      width: 23.5,
      height: 32
    },
    orientation: new Cesium.VelocityOrientationProperty(
      new Cesium.ConstantPositionProperty(
        Cesium.Cartesian3.ZERO
      )
    )
  })
  makers.push(makerEntity)
}
// 删除所有maker
const deleteAllMaker = () => {
  makers.forEach((item) => {
    mapViewer[defaultViewId.value].entities.remove(item)
  })
  makers = []
}
// 隐藏所有maker
const hideAllMaker = () => {
  makers.forEach((item) => {
    item.show = false
  })
}
// 显示所有maker
const showAllMaker = () => {
  makers.forEach((item) => {
    item.show = true
  })
}
// 高亮的土地项
const hightLightLand = ref(null)
// 点击土地列表
const handleLandClick = (item) => {
  if (!activeTab['kgsj']) {
    loadKJData()
  }
  hightLightLand.value = item.SmID
  const SmID = item.SmID
  makers.map((item) => {
    item.billboard.scale = 1
    if (item.id === SmID) {
      item.billboard.scale = 1.5
      mapViewer[defaultViewId.value].flyTo(item, {
        duration: 0.5,
        offset: new Cesium.HeadingPitchRange(
          Cesium.Math.toRadians(0),
          Cesium.Math.toRadians(-90),
          10000
        )
      })
    }
  })
}
// 删除或者添加图层
const changeLayer = (layerName) => {
  if (_layerManager) {
    const layerManage = _layerManager
    if (activeTab[layerName]) {
      layerManage.del(layerName)
    } else {
      switch (layerName) {
        case 'kgsj':
          loadKJData()
          break
        case 'cqgh':
          loadLandDataJson()
          break
        case 'bzsj':
          loadZhtdKjDataJson()
          break
      }
    }
  }
}
// 获取图例
const getLegendLayer = async (url) => {
  try {
    const res = await axios.get(url + '/layers.json')
    if (res.data) {
      const subLayerNames = []
      const subLayers = []
      if (
        res.data &&
        res.data.length &&
        res.data[0].subLayers &&
        res.data[0].subLayers.layers.length
      ) {
        res.data[0].subLayers.layers.forEach((subLayer) => {
          subLayerNames.push(
            subLayer.name + '@@' + res.data[0].name
          )
          subLayers.push(subLayer)
        })
        // console.log('sublayers', subLayers)
        const legendDataList = []
        for await (const [
          subLayerIndex,
          subLayer
        ] of subLayers.entries()) {
          if (
            subLayer.theme &&
            subLayer.theme.items &&
            subLayer.theme.items instanceof Array &&
            subLayer.theme.items.length
          ) {
            // 配置了专题图
            for await (const item of subLayer.theme.items) {
              const tempLegendData = {
                // name: subLayer.caption,
                name: item.caption
              }

              let resourceType = ''
              let requestNetworkImage = false
              if (
                subLayer.datasetInfo.type === 'POINT' ||
                subLayer.datasetInfo.type === 'POINT3D'
              ) {
                resourceType = 'SYMBOLMARKER'
                if (item.style.markerSymbolID !== 0) {
                  requestNetworkImage = true
                }
              } else if (
                subLayer.datasetInfo.type === 'LINE' ||
                subLayer.datasetInfo.type === 'LINE3D'
              ) {
                resourceType = 'SYMBOLLINE'
                if (item.style.lineSymbolID !== 0) {
                  requestNetworkImage = true
                }
              } else if (
                subLayer.datasetInfo.type === 'REGION' ||
                subLayer.datasetInfo.type === 'REGION3D'
              ) {
                resourceType = 'SYMBOLFILL'
                if (item.style.fillSymbolID !== 0) {
                  requestNetworkImage = true
                }
              }
              if (requestNetworkImage) {
                try {
                  await axios
                    .get(
                      url +
                        `/symbol.json?resourceType=${resourceType}&style=` +
                        JSON.stringify(item.style) +
                        '&transparent=true'
                    )
                    .then((res) => {
                      // console.log('图例json数据', res)
                      if (
                        // res.status === 200 &&
                        res.data &&
                        res.data.resourceImageUrl
                      ) {
                        tempLegendData.img =
                          res.data.resourceImageUrl
                      }
                    })
                } catch (e) {
                  console.error('请求图例图片错误', e)
                }
              } else {
                if (resourceType === 'SYMBOLLINE') {
                  tempLegendData.color =
                    item.style.lineColor
                } else if (resourceType === 'SYMBOLFILL') {
                  tempLegendData.color =
                    item.style.fillForeColor
                }
              }

              // if (
              //   item.style.markerSymbolID === 0 &&
              //   item.style.lineSymbolID === 0 &&
              //   item.style.fillSymbolID === 0
              // ) {
              //   if (
              //     subLayer.datasetInfo.type === 'LINE'
              //   ) {
              //     tempLegendData.color =
              //       item.style.lineColor
              //   } else if (
              //     subLayer.datasetInfo.type ===
              //     'REGION'
              //   ) {
              //     tempLegendData.color =
              //       item.style.fillForeColor
              //   }
              // } else {
              //   let resourceType = ''
              //   if (item.style.markerSymbolID !== 0) {
              //     resourceType = 'SYMBOLMARKER'
              //   } else if (
              //     item.style.lineSymbolID !== 0
              //   ) {
              //     resourceType = 'SYMBOLLINE'
              //   } else if (
              //     item.style.fillSymbolID !== 0
              //   ) {
              //     resourceType = 'SYMBOLFILL'
              //   }
              //   try {
              //     await axios
              //       .get(
              //         url +
              //           `/symbol.json?resourceType=${resourceType}&style=` +
              //           JSON.stringify(item.style) +
              //           '&transparent=true'
              //       )
              //       .then((res) => {
              //         // console.log('图例json数据', res)
              //         if (
              //           // res.status === 200 &&
              //           res.data &&
              //           res.data.resourceImageUrl
              //         ) {
              //           tempLegendData.img =
              //             res.data.resourceImageUrl
              //         }
              //       })
              //   } catch (e) {
              //     console.error('请求图例图片错误', e)
              //   }
              // }
              legendDataList.push(tempLegendData)
            }
          } else {
            // 未配置专题图
            const subLayerName = subLayerNames[
              subLayerIndex
            ].replaceAll('#', '.')
            legendDataList.push({
              name: subLayer.caption,
              img:
                url +
                '/layers/' +
                subLayerName +
                '/legend.png?width=30&height=30'
            })
          }
        }

        if (legendDataList.length) {
          const tempList = legendDataList.map((item) => {
            return {
              img: item.img,
              color: item.color,
              name: item.name
              // pkid: data.pkid + '-' + index
            }
          })
          return tempList
          // this.$bus.$emit(
          //   'addLegendData',
          //   tempList,
          //   data.pkid
          // )
        } else {
          // this.$bus.$emit('addLegendData', [], data.pkid)
        }
      } else {
        // this.$bus.$emit('addLegendData', [], data.pkid)
      }
    } else {
      // this.$bus.$emit('addLegendData', [], data.pkid)
    }
  } catch (error) {
    console.error('查询子图层失败', err)
  }
}

// 详情弹窗
const detailVisible = ref(false)
const detailPkid = ref('')
const detailType = ref('')
const hideDetail = () => {
  detailVisible.value = false
  detailPkid.value = ''
  detailType.value = ''
}
const showDetail = (id, type) => {
  detailVisible.value = true
  detailPkid.value = id
  detailType.value = type
}

// 底部多选
const bottomChecked = ref({
  gjz: false,
  gdz: false,
  ggfwcn: false,
  szfwcz: false
})

const bottomCofig = ref([
  {
    type: 'mvt',
    title: '轨道交通',
    name: 'gdjt',
    id: 'gdjt',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E8%BD%A8%E9%81%93%E4%BA%A4%E9%80%9A',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '轨道交通',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0103_%E4%BA%A4%E9%80%9A%E5%BB%8A%E9%81%93_%E8%BD%A8%E9%81%93%E4%BA%A4%E9%80%9A_2D'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '公交站点',
    name: 'gjzd',
    id: 'gjzd',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E5%85%AC%E4%BA%A4%E7%AB%99%E7%82%B9',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '公交站点',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0106_%E5%85%AC%E5%85%B1%E6%9C%8D%E5%8A%A1%E8%AE%BE%E6%96%BD_2D'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '电力配套',
    name: 'dlpt',
    id: 'dlpt',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E7%94%B5%E5%8A%9B%E9%85%8D%E5%A5%97',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '电力变电站',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E7%94%B5%E5%8A%9B_%E5%8F%98%E7%94%B5%E7%AB%99_2D'
          },
          {
            name: '电力管道',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E7%94%B5%E5%8A%9B_%E7%AE%A1%E9%81%93'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '给水配套',
    name: 'gspt',
    id: 'gspt',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E7%BB%99%E6%B0%B4%E9%85%8D%E5%A5%97',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '给水设施',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E7%BB%99%E6%B0%B4_%E8%AE%BE%E6%96%BD_2D'
          },
          {
            name: '给水管道',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E7%BB%99%E6%B0%B4_%E7%AE%A1%E9%81%93'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '燃气配套',
    name: 'rqpt',
    id: 'rqpt',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E7%87%83%E6%B0%94%E9%85%8D%E5%A5%97',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '燃气调压站',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E7%87%83%E6%B0%94_%E8%B0%83%E5%8E%8B%E7%AB%99_2D'
          },
          {
            name: '燃气管道',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E7%87%83%E6%B0%94_%E7%AE%A1%E9%81%93'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '污水配套',
    name: 'wspt',
    id: 'wspt',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E6%B1%A1%E6%B0%B4%E9%85%8D%E5%A5%97',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '污水设施',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E6%B1%A1%E6%B0%B4_%E8%AE%BE%E6%96%BD_2D'
          },
          {
            name: '污水管道',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E6%B1%A1%E6%B0%B4_%E7%AE%A1%E9%81%93'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '通信配套',
    name: 'txpt',
    id: 'txpt',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E9%80%9A%E4%BF%A1%E9%85%8D%E5%A5%97',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '通信管道',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0302_%E9%80%9A%E4%BF%A1_%E7%AE%A1%E9%81%93'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '学校配套',
    name: 'xxpt',
    id: 'xxpt',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E5%AD%A6%E6%A0%A1%E9%85%8D%E5%A5%97',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '学校配套',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0106_%E5%85%AC%E5%85%B1%E6%9C%8D%E5%8A%A1%E8%AE%BE%E6%96%BD_2D'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '医院',
    name: 'yy',
    id: 'yy',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E5%8C%BB%E9%99%A2',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '医院',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0106_%E5%85%AC%E5%85%B1%E6%9C%8D%E5%8A%A1%E8%AE%BE%E6%96%BD_2D'
          }
        ]
      }
    ]
  },
  {
    type: 'mvt',
    title: '体育设施',
    name: 'tyss',
    id: 'tyss',
    serviceUrl:
      'https://pad.cdwlkjcmap.com:6080/net/iserver/services/map-WeiLaiKeJiChengShuJuJianKu/rest/maps/B2001_%E4%BD%93%E8%82%B2%E8%AE%BE%E6%96%BD',
    currentDataIndex: 0,
    dataList: [
      {
        resourceServiceDataInfoList: [
          {
            name: '体育设施',
            serviceDataUrl:
              'https://pad.cdwlkjcmap.com:6080/net/iserver/services/data-WeiLaiKeJiChengShuJuJianKu/rest/data/datasources/B_%E8%A7%84%E5%88%92%E6%95%B0%E6%8D%AE%E5%BA%93/datasets/B0106_%E5%85%AC%E5%85%B1%E6%9C%8D%E5%8A%A1%E8%AE%BE%E6%96%BD_2D'
          }
        ]
      }
    ]
  }
])
// 添加或移除底部图层
const changeBottomLayer = (checked, layer) => {
  if (layer.name) {
    const layerManage = _layerManager
    if (!checked) {
      layerManage.del(layer.name)
    } else {
      switch (layer.type) {
        case 'mvt':
          loadMvtLayer(layer)
          break
      }
    }
  }
}
// 加载图层
const loadMvtLayer = (layerConifg) => {
  const viewer = mapViewer[defaultViewId.value]
  const layerManager = _layerManager

  viewer.scene.addVectorTilesMap({
    url: layerConifg.serviceUrl,
    name: layerConifg.name,
    viewer: viewer
  })
  const layer = {
    type: 'mvt',
    layer: mvt,
    title: layerConifg.title,
    name: layerConifg.name,
    id: layerConifg.id,
    serviceUrl: layerConifg.serviceUrl,
    dataList: layerConifg.dataList || [],
    currentDataIndex: layerConifg.currentDataIndex || 0
  }
  layerManager.set(layer)
  layerManager.fire('add', layer)
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.popup {
  position: absolute;
  z-index: 999;
}
.land {
  position: relative;
  display: flex;
  flex: 1 1 auto;
}
.keyword-search {
  position: absolute;
  top: 20px;
  left: 330px;
  background: #497fa3;
  border-radius: 0px 2px 2px 0px;
  width: 54px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
::v-deep {
  .keyword {
    width: 310px;
    position: absolute;
    top: 20px;
    left: 20px;
    position: absolute;
    cursor: pointer;
    // z-index: 9999;
  }
  .el-input {
    width: 310px;
    .el-input__inner {
      height: 38px !important;
    }
    .el-input__suffix {
      height: 38px;
      .el-input__suffix-inner {
        height: 38px !important;
      }
    }
  }
}
.list {
  position: absolute;
  top: 64px;
  left: 20px;
  height: calc(100% - 84px);
  width: 310px;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &-title {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f6fb;
    &-name {
      color: #4c565c;
      line-height: 18px;
      font-size: 16px;
      font-weight: 500;
      position: relative;
      box-sizing: border-box;
      padding: 0 0 0 11px;
      line-height: 16px;

      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background: linear-gradient(
          180deg,
          #40ebff,
          #bcf8ff
        );
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    &-total {
      color: #4c565c;
      line-height: 18px;
      font-size: 16px;
    }
  }
  &-top {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 15px 20px;
    background-color: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    &-item {
      width: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        margin-bottom: 10px;
      }
      &-title {
        width: 100%;
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        color: #4c565c;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active {
          color: #00baff;
        }
      }
    }
  }
  &-reset {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0 20px 10px 20px;
    border-bottom: 2px solid #f2f6fb;
    background-color: #fff;
    .svg-icon {
      margin-right: 5px;
    }
    &-button {
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      color: #497fa3;
    }
  }
  &-content {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #fff;
    .active {
      .list-content-item-top {
        color: #00baff;
        &-num {
          font-size: 18px;
          font-weight: bold;
          color: #00baff;
        }
      }
      .list-content-item-bottom {
        color: #00baff;
      }
    }
    &-item {
      width: 100%;
      border-bottom: 1px solid #f2f6fb;
      box-sizing: border-box;
      padding: 13px 15px;
      cursor: pointer;
      &-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        line-height: 16px;
        font-weight: 500;
        color: #3c3c3c;
        margin-bottom: 12px;
        &-num {
          font-size: 18px;
          font-weight: bold;
          color: #00baff;
        }
      }
      &-bottom {
        font-size: 14px;
        line-height: 14px;
        font-weight: 400;
        color: #4c565c;
      }
    }
  }
  &-pagination {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    ::v-deep {
      .el-pagination {
        padding: 0;
        .btn-next {
          margin-right: 0;
        }
      }
      .active {
        // background: #f6f9fc !important;
        color: #00baff !important;
      }
      button {
        // border: 1px solid #ebf1f8 !important;
        // background: white !important;
        color: #a7adb5 !important;
      }
      li {
        // background: white !important;
        // color: #00baff !important;
        // border: 1px solid #ebf1f8;
        // border-radius: 2px;
        font-weight: 400 !important;
        font-size: 12px !important;
        line-height: 25px !important;
      }
    }
  }
}
.search {
  position: absolute;
  top: 64px;
  left: 340px;
  height: 400px;
  width: 310px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  &-header {
    width: 100%;
    height: 46px;
    border-bottom: 2px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 17px;
    span {
      font-size: 16px;
      font-weight: 500;
      color: #4c565c;
    }
    i {
      color: #0a0a0a;
      opacity: 0.5;
      cursor: pointer;
    }
  }
  &-title {
    color: #4c565c;
    line-height: 16px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    padding: 0 0 0 11px;
    line-height: 16px;
    margin: 15px 0 10px 10px;

    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  &-content {
    width: 100%;
    box-sizing: border-box;
    flex: 1;
    overflow-y: auto;
    padding: 0 10px;
    &-panel {
      width: 100%;
      box-sizing: border-box;
      // padding: 10px;
      ::v-deep {
        .el-input {
          .el-input__inner {
            height: 32px !important;
            // background: #f6f9fc;
          }
          .el-input__suffix {
            height: 32px;
            .el-input__suffix-inner {
              height: 32px !important;
            }
          }
        }
      }
    }
    &-title {
      color: #3c3c3c;
      line-height: 18px;
      font-size: 14px;
      line-height: 14px;
      margin-bottom: 10px;
    }
    &-title1 {
      margin-top: 15px;
    }
    &-inputs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      ::v-deep {
        .el-input-number {
          .el-input {
            width: auto;
          }
          .el-input__inner {
            padding-left: 20px;
            padding-right: 20px;
          }
          .el-input-number__decrease,
          .el-input-number__increase {
            width: 20px;
          }
        }
      }
      &-middle {
        margin: 0 10px;
      }
      &-unit {
        color: #4c565c;
        line-height: 18px;
        font-size: 14px;
        min-width: 44px;
        margin-left: 10px;
      }
      &-unit1 {
        color: #4c565c;
        line-height: 18px;
        font-size: 14px;
        min-width: 14px;
        margin-left: 10px;
      }
    }
    &-block {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      &-item {
        width: 92px;
        height: 44px;
        box-sizing: border-box;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4c565c;
        line-height: 16px;
        font-size: 14px;
        margin-bottom: 7px;
        text-align: center;
        cursor: pointer;
        background: #f6f9fc;
        border: 1px solid #ebf1f8;
        border-radius: 2px;
        &.active {
          color: #00baff;
          border: 1px solid #00baff;
        }
      }
      &-item1 {
        width: 97px;
      }
    }
  }

  &-button {
    border-top: 1px solid #f2f6fb;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep {
      .save-btn {
        background: #497fa3;
        border: 1px solid #497fa3;
        color: white;
        font-size: 14px;
        width: 80px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cancle-btn {
        font-size: 14px;
        width: 80px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #497fa3;
        color: #497fa3;
      }
    }
  }
}

.detail {
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #fff;
  z-index: 2000;
  .el-icon-error {
    color: #f56c6c;
    font-size: 25px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 2000;
  }
}

.bottom {
  height: 68px;
  background: url('~@/assets/img/td-bottom.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 10px 0 10px;
  &-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
    &:last-child {
      &::before {
        display: none;
      }
    }
    &::before {
      position: absolute;
      content: ' ';
      width: 1px;
      height: 14px;
      background-color: rgba(255, 255, 255, 0.25);
      right: 0;
      top: 5px;
    }
    &-name {
      font-size: 16px;
      font-weight: bold;
      color: #effbff;
      margin-left: 5px;
    }
    ::v-deep {
      .el-checkbox__inner {
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 2px;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #409eff;
        border-color: #409eff;
      }
    }
  }
}
</style>
